<!DOCTYPE html>
{% load staticfiles %}
<html>
<head>
<link rel="icon" href="{% static 'showControler/images/header.ico' %}" type="image/x-icon" />
<link rel="shortcut icon" href="{% static 'showControler/images/header.ico' %}" type="image/x-icon" />

<script type="text/javascript" src="{% static 'showControler/js/jquery.min.js' %}"></script>
<script src="{% static 'showControler/js/RGraph/RGraph.common.core.js' %}"></script>
<script src="{% static 'showControler/js/RGraph/RGraph.common.key.js' %}"></script>
<script src="{% static 'showControler/js/RGraph/RGraph.drawing.rect.js' %}"></script>
<script src="{% static 'showControler/js/RGraph/RGraph.common.dynamic.js' %}"></script>
<script src="{% static 'showControler/js/RGraph/RGraph.bar.js' %}"></script>
<script type="text/javascript" src="{% static 'showControler/js/content_base.js' %}"></script>
<script src="{% static 'showControler/js/draw_picture.js' %}"></script>
<script src="{% static 'showControler/js/analysis_right_content.js' %}"></script>

<link rel="stylesheet" type="text/css" href="{% static 'bootstrap/css/bootstrap.css' %}" />
<script type="text/javascript" src="{% static 'bootstrap/js/bootstrap.js' %}"></script>

<style type='text/css'>
.table-striped tbody > tr.selectedRow:nth-child(odd) > td, .table-striped tbody > tr.selectedRow:nth-child(even) > td{
        background-color: #B0BED9;
}
</style>
</head>
<body>
<div class='navbar navbar-inverse'>
<div class = 'navbar-inner'>
<div class = 'container-fluid'>
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
        </a>
        <a class='brand' href='#'>Compare All Tables</a>
</div>
</div>
</div>

<div id='compareContainer' class='container-fluid'>
{% for id in ids %}
<input type='hidden' value='{{id}}' name='testids'/>
{% endfor %}

<div id='compareBody'>
        {% for tableName, compressTableName, tableDatas in datas %}
        <div id='row{{compressTableName}}' class='row-fluid'>
                <h3 class='pull-left' id='{{compressTableName}}'>{{tableName}}</h3>
                <div id='rightChart{{compressTableName}}'></div>
                <div id='leftTable{{compressTableName}}'>
                <div class='compareTableContainer' id='compareTableContainer{{compressTableName}}'>
                <div class='compareTableBody'>
                        <div class='showingtable pull-right text-info' style='padding-top:10px;margin-right:20px;'>showing 1 to {{end}}</div>
                        <div class='realTableContainer'>
                                <table id='compareTable{{compressTableName}}' class='table table-striped table-hover table-bordered table-condensed'>
                                <thead>
                                        <tr>
                                        {% for name in names %}
                                        <th>{{name}}</th>
                                        {% endfor %}
                                        </tr>
                                </thead>
                                <tbody>
                                        {% for data in tableDatas %}
                                        <tr onclick='addTrListener(this)'>
                                                {% for item in data %}
                                                <td>{{item}}</td>
                                                {% endfor %}
                                        </tr>
                                        {% endfor %}
                                </tbody>
                                </table>
                        <input type='hidden' value='{{start}}' name='compareStart' />
                        <input type='hidden' value='{{end}}' name='compareEnd' />
                        </div>
                        <div class='btn btn-inverse pull-right' style='margin-right:10px;' onclick='compareNext(this)'>next <i class="icon-forward icon-white"></i></div>
                        <div class='btn btn-inverse disabled pull-right' style='margin-right:10px;' onclick='comparePrevious(this)'><i class="icon-backward icon-white"></i> Previous</div>
                        <div class='btn btn-inverse pull-right' style='margin-right:10px;' onclick='showCompareSelectedDatas(this)'><i class="icon-adjust icon-white"></i> Compare</div>
                        <div class='lastline' style='clear:both;margin-bottom:10px;'></div>
                </div>
                </div>
                </div>
        </div>
        {% endfor %}
</div>

</div>
</body>
</html>
